<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.timepicker.min.css" />
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div id="searchBox">
          <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">操作人</label>
                <div class="layui-input-inline">
                  <input type="text" name="name" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">请求id</label>
                <div class="layui-input-inline">
                  <input type="text" name="request_id" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">IP</label>
                <div class="layui-input-inline">
                  <input type="text" name="ip" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">系统</label>
                <div class="layui-input-inline" style="width: 160px">
                  <select name="system" lay-filter="system-select" id="system_select"></select>
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-inline">
                  <input type="text" name="startDate" id="startDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline">
                  <input id="timeformatExample1" class="layui-input" type="text" class="time" />
                </div>
              </div>
              <label style="margin-right: 5px"></label>
              <div class="layui-inline">
                <label class="layui-form-label">接口</label>
                <div class="layui-input-inline">
                  <input type="text" name="url" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">错误信息</label>
                <div class="layui-input-inline">
                  <input type="text" name="err_msg" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-reset-btn">重置</button>
                <!-- <button type="reset" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-export-btn">导出</button> -->
              </div>
            </div>
          </form>
        </div>
        <table class="layui-hide" id="currentTableId" lay-size="sm" lay-filter="currentTableFilter"></table>
      </div>
    </div>
    <script id="syscodeSelect" type="text/html">
      <!--layui模板引擎，动态添加后台数据-->
      {{# layui.each(d, function(index, item){ }}
      <option value="{{  item.sys_code  }}">{{ item.name }}</option>
      {{# }); }}
    </script>
    <style>
      #searchBox .layui-inline {
        margin: 0 0px 10px 0;
      }
      .layui-form-item {
        margin: 0 !important;
      }
      #colorExam {
        padding: 0 10px 0;
      }
      .spanItem {
        line-height: 20px;
        margin-right: 20px;
        display: inline-block;
      }
      .spanItem span {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
      }
      .spanItem .redItem {
        background: #4f7ecb;
      }
      .spanItem .blueItem {
        background: #e34d4d;
      }
      .layui-form-pane .layui-input-inline {
        width: 120px;
      }
    </style>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/common.js" charset="utf-8"></script>
    <script src="../js/base.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery.timepicker.min.js"></script>
    <script>
      /**获取近N天*/
      function getRecentDay(day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds);
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
      }
      function doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
          m = "0" + month;
        }
        return m;
      }
      //curData存储当前操作行的数据 用于给iframe弹窗传值
      let curData = {};
      layui.use(["form", "table", "laydate", "myModule", "laytpl"], function () {
        //初始化开始
        var $ = layui.jquery,
          form = layui.form,
          table = layui.table,
          layuimini = layui.layuimini,
          myModule = layui.myModule,
          laytpl = layui.laytpl,
          laydate = layui.laydate;

        //日期
        laydate.render({
          elem: "#startDate",
          //value:new Date(),//默认值今天
          done: function (value, date) {
            if ($("#timeformatExample1").val() == "") {
              $("#timeformatExample1").val("00:00:00");
            }
          },
        });
        let tableBlue = "#4f7ecb"; //表格蓝色
        let tableRed = "#e34d4d"; //表格红色
        let tableOrg = "#eeb814"; //表格橙色
        //设置表格高度
        let tableHeight = getBaseHeight() - $("#searchBox").outerHeight() - 20;
        myModule.ajax({
          url: "../api/syscode-select.json",
          type: "GET",
          dataType: "json",
          success: function (res) {
            var getTpl = $("#syscodeSelect").get(0).innerHTML;
            var view = $("#system_select").get(0);
            console.log("res.data", res.data);
            var html = laytpl(getTpl).render(res.data, function (html) {
              view.innerHTML = html;
            });
            form.render("select");
          },
          error: function () {
            // layer.close(loadInd);
          },
        });
        //时间选择器
        $("#timeformatExample1").timepicker({ timeFormat: "H:i:s" });
        $("#timeformatExample2").timepicker({ timeFormat: "H:i:s" });
        /***********************************表格渲染及表格操作按钮监听********************************************/
        //构建表格
        table.render({
          elem: "#currentTableId",
          //url: '../api/table.json',
          height: tableHeight, //设置表格高度
          // url: `${ajaxUrlSet}/log_query`,
          contentType: "application/json",
          where: {
            request_id: "",
            url: "",
            name: "",
            syscode: "",
            ip: "",
            time: 0,
            err_msg: "",
          }, //如果无需传递额外参数，可不加该参数
          // method: 'post', //如果无需自定义HTTP类型，可不加该参数
          //toolbar: '#toolbarDemo',
          defaultToolbar: [
            "filter",
            "exports",
            "print",
            {
              title: "提示",
              layEvent: "LAYTABLE_TIPS",
              icon: "layui-icon-tips",
            },
          ],
          //limit:Number.MAX_VALUE, // 数据表格默认全部显示
          cols: [
            [
              { type: "numbers", width: 80, title: "序号" },
              { field: "time", width: 160, title: "时间" },
              { field: "syscode", width: 60, title: "系统" },
              { field: "request_id", width: 200, title: "请求id" },
              { field: "ip", width: 130, title: "ip" },
              { field: "name", width: 80, title: "操作人" },
              { field: "url", width: 320, title: "接口" },
              { field: "err_msg", width: 320, title: "错误信息" },
            ],
          ],
          page: false,
          done: function (res, curr, count) {
            //关闭遮罩层
            layer.closeAll("loading");
          },
          error: function (res) {
            //关闭遮罩层
            layer.closeAll("loading");
            layer.msg("请求失败", { icon: 2, time: 1100 });
          },
        });

        /*****************************************搜索栏接听*******************************************/
        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          var result = data.field;
          console.log("re", result);
          layer.load(0, {
            shade: [0.1, "#000"],
          });
          //执行搜索重载
          table.reload("currentTableId", {
            url: `${ajaxUrlSet}/list_service_error`,
            method: "post", //如果无需自定义HTTP类型，可不加该参数
            where: {
              request_id: result.request_id,
              url: result.url,
              name: result.name, //操作人
              syscode: result.system,
              ip: result.ip,
              err_msg: result.err_msg,
              time: `${result.startDate} ${$("#timeformatExample1").val() ? $("#timeformatExample1").val() : ""}`,
            },
            done: function (res, curr, count) {
              //关闭遮罩层
              layer.closeAll("loading");
              var len = res.data.length - 1;
            },
          });

          return false;
        });
        // 监听重置操作
        form.on("submit(data-reset-btn)", function (data) {
          console.log("reset");
          $("#system_select").val("14"); //重置syscode 默认为住院收费系统
          startTime = "";
          endTime = "";
          form.render();
        });
      });
      //iframe弹窗获取当前操作行数据的方法
      function getCurData() {
        return curData;
      }
    </script>
  </body>
</html>
